import { Form, Modal, Button, Input } from 'antd'
import { useContext } from 'react'
import { reportReviewContext } from '../../_context'

const { TextArea } = Input

export default () => {
  const { handleCancelModal, isModalOpen, rejectForm, onFinish } = useContext(reportReviewContext)
  const layout = {
    wrapperCol: { span: 24 },
  }
  const tailLayout = {
    wrapperCol: { offset: 8, span: 24 },
  }
  return (
    <>
      <Modal title='退回原因' open={isModalOpen} footer={null} onCancel={handleCancelModal}>
        <Form {...layout} form={rejectForm} name='control-hooks' onFinish={onFinish}>
          <Form.Item name='returnReason' rules={[{ required: true, message: '请输入拒绝原因' }]}>
            <TextArea rows={4} placeholder='输入原因' />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button htmlType='button' onClick={handleCancelModal} style={{ marginRight: '24px' }}>
              取消
            </Button>
            <Button type='primary' htmlType='submit'>
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
